<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    

    <!-- data与el的2种写法
        1. el有2种写法：
            （1）new Vue()时候配置el属性，即data{}里面直接写入el:'#root'
            （2）先创建Vue实例（new一个Vue赋值），随后再通过.mount('#root')，即先创建vue实例，再挂载到root上
        2. data有2种写法：对象式
            （1）对象式：data:{}，data中可以写复杂类型的数据
            （2）函数式：data:function(){return{}}，data中不能写复杂类型的数据，因为data是函数，
                        每次调用都会返回一个新的data，而对象式data是同一个data，
                        所以对象式data中的数据是共享的，而函数式data中的数据是独立的
                如何选择：目前，两种写法都可以使用，以后学到组件时，data必须使用函数式写法，否则会报错
        3. 一个重要的原则：
            由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this的指向就不是Vue实例了，而是window
    -->




    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>


    <script type="text/javascript">
/*
        第一种写法
        new Vue({
            // el:'#root',
            data:{
                name:'张三'
            }
        })

*/

/*
        // 第二种写法是先创建vue实例，再挂载到root上
        const v = new Vue({
            data:{
                name:'李四'
            }
        })
        v.$mount('#root')   //挂载到root上，相当于el:'#root',mount为挂载的意思
        console.log(v)   //查看vue实例对象


*/
        /*-------------------------------分割线----------------------------------*/

        new Vue({
            el:'#root',
            //data第一种写法：对象式
            /*data:{
                name:'王五'
            }  */


            //data第二种写法：函数式
            data:function(){
                console.log(this)   //this指向Vue实例对象,不是window;如果用箭头函数，this指向window，因为箭头函数没有自己的this
                
                return{
                    name:'王五'
                }
            }
        })


    </script>

</body>
</html>